<template>
  <el-sub-menu
    v-if="menu.children && menu.children.length > 0"
    :index="menu.path"
  >
    <template #title>
      <!-- icon icon结构和不带子组件的不同，所以写两遍 -->
      <el-icon v-if="menu.meta.icon">
        <component :is="menu.meta.icon" />
      </el-icon>
      <!-- title -->
      <span>{{ menu.meta.title }}</span>
    </template>
    <menu-item v-for="item in menu.children" :key="item.path" :menu="item" />
  </el-sub-menu>
  <el-menu-item :index="menu.path" v-else>
    <!-- icon -->
    <el-icon v-if="menu.meta.icon">
      <component :is="menu.meta.icon" />
    </el-icon>
    <!-- title -->
    <template #title>
      {{ menu.meta.title }}
    </template>
  </el-menu-item>
</template>
<script lang="ts" setup>
defineOptions({
  name: 's-menu-item',
})
defineProps<{
  menu: any
}>()
</script>
